<template>
  <view>
    <!--1. 搜索栏 -->
    <ugo-search />
    <!-- 2.轮播图 -->
    <swiper class="banner" indicator-dots autoplay circular>
      <swiper-item v-for="item in bannerList" :key="item.goods_id">
        <image :src="item.image_src" mode="scaleToFill" />
      </swiper-item>
    </swiper>
    <!-- 3.路由导航 -->
    <view class="nav">
      <navigator
        url="/pages/category/category"
        hover-class="none"
        open-type="switchTab"
        v-for="item in navList"
        :key="item.name"
      >
        <image :src="item.image_src" mode="scaleToFill" />
      </navigator>
    </view>
    <!-- 4.流体导航 -->
    <view class="floor" v-for="(item, index) in floorList" :key="index">
      <view class="floor-title">
        <image :src="item.floor_title.image_src" mode="widthFix" />
      </view>
      <view class="floor-main">
        <navigator
          url="/pages/index/index"
          hover-class="none"
          open-type="navigate"
          v-for="goods in item.product_list"
          :key="goods.name"
        >
          <image
            :src="goods.image_src"
            mode="scaleToFill"
            :style="'width:' + goods.image_width + 'rpx'"
          />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
// 2. 导入组件
export default {
  data() {
    return {
      keyword: '',
      bannerList: [],
      navList: [],
      floorList: [],
    }
  },
  onLoad() {
    this.getBnnear()
    this.getNav()
    this.getFloor()
  },
  async onPullDownRefresh() {
    //清空页面数据
    this.keyword = ''
    this.bannerList = []
    this.navList = []
    this.floorList = []
    //重新发送请求
    await Promise.all([this.getBnnear(), this.getNav(), this.getFloor()])

    //停止当前页面下拉刷新
    uni.stopPullDownRefresh()
  },
  methods: {
    // 轮播图样式
    async getBnnear() {
      const res = await uni.$u.http.request({
        method: 'GET',
        url: '/home/swiperdata',
      })
      this.bannerList = res.data.message
    },
    // 导航栏样式
    async getNav() {
      const res = await await uni.$u.http.request({
        method: 'GET',
        url: '/home/catitems',
      })
      this.navList = res.data.message
    },
    // 导楼梯样式
    async getFloor() {
      const res = await uni.$u.http.request({
        method: 'GET',
        url: '/home/floordata',
      })
      this.floorList = res.data.message
    },
  },
}
</script>

<style lang="scss">
// 搜索栏样式
.search {
  padding: 10rpx 25rpx;
  background-color: #eb4450;
}
// 轮播图样式
.banner,
.banner image {
  width: 750rpx;
  height: 340rpx;
}
/* 导航图片 */
.nav {
  display: flex;
  justify-content: space-around;
  padding: 12rpx 0 42rpx;
  image {
    width: 128rpx;
    height: 140rpx;
  }
}
/* 楼层样式 */
.floor {
  .floor-title {
    // 标题图片
    image {
      width: 750rpx;
    }
  }
  .floor-main {
    // 商品图片
    image {
      // 浮动实现图片环绕效果
      float: left;
      height: 188rpx;
      margin-left: 15rpx;
      margin-bottom: 10rpx;
    }
    // 🎯修正第一个链接图片的高度
    navigator:nth-child(1) image {
      height: 386rpx;
    }
  }
}
</style>
